<template>
  <yk-space dir="vertical" style="width: 100%;" size="xl">
    <ArticleItem v-if="articleList.length > 0" v-for="item in articleList" :key="item.id" :articleData="item" @delete="deleteArticle" :searchTerm="props.searchTerm"
      @state="updateArticleState" />
    <div class="pagination" v-if="articleList.length > 0">
      <yk-pagination  :total="articlCount" size="m" @change="changePage"
        :default-page-size="props.pageSize"></yk-pagination>
    </div>
  <Empty v-if="articleList.length === 0" />
  </yk-space>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance, watch } from 'vue';
import ArticleItem from './article-item.vue';
// import { mkarticle } from '../../mock/data';
import { useCode } from '../../hooks/codeHook'; // 导入处理返回码的钩子函数
import { useArticle } from '../../hooks/articleHook';
import { useUserStore } from '../../stores/user';
import { updateArticleStateApi, deleteArticleApi } from '../../api/article_api';
import { useSubset } from '../../hooks/subsetHook';
import Empty from '../common/empty.vue';


const { rawSubset,
  getArticleState
} = useSubset(); // 获取分组列表

const { tackleCode } = useCode();
const userStore = useUserStore();

const {
  getArticle,
  articleList, //文章列表
  articlCount, //文章数量
} = useArticle(); //管理标签选择

const proxy: any = getCurrentInstance()?.proxy

const props = defineProps({
  pageSize: {
    type: Number,
    default: 8,
  },
  subsetId: {
    type: Number,
    default: -1,
  },
  state: {
    type: Number,
    default: 0,
  },
  searchTerm: {
    type: String,
    default: '',
  }
})
type Requset = {
  // 令牌，可选参数
  token?: string;
  // 单页条数
  pageSize: number;
  // 当前页，此处原代码可能存在语法错误，推测需要添加该属性
  nowPage: number;
  // 状态，可选参数
  state?: number;
  // 分组，可选参数
  subset_id?: number;
  // 搜索词条，原代码可能存在拼写错误，推测应为 string 类型
  searchTerm?: string;
  // 是否统计，可选参数
  count?: boolean;
  // 类型
  classify?: number;
}
const request: Requset = {
  token: userStore.token,
  pageSize: props.pageSize,
  nowPage: 1,
  state: props.state,
  subset_id: props.subsetId,
  searchTerm: props.searchTerm,
  classify: 0,
  count: true,
}

//更新文章状态
const updateArticleState = (e: { id: number; state: number }) => {
  try {
    let request = {
      token: userStore.token,
      id: e.id,
      state: e.state,
    }
    updateArticleStateApi(request).then((res: any) => {
      if (tackleCode(res.data.code)) {
        articleList.value = articleList.value.map((item) => {
          if (item.id === e.id) {
            return { ...item, state: e.state }; // 更新状态为 1
          }
          return item; // 保持其他项不变
        });
        getArticleState();
        proxy.$message({ type: 'success', message: '更新成功' });
      }
    })
  } catch (error) {
    proxy.$message({ type: 'error', message: '更新失败' });
    console.error('更新文章状态失败', error);
  }
}

//删除文章
const deleteArticle = (id: number) => {
  try {
    let req = {
      token: userStore.token,
      id: id,
      fileUrl:articleList.value.find((item) => item.id === id)?.cover,
    }
    deleteArticleApi(req).then((res: any) => {
      if (tackleCode(res.data.code)) {
        articleList.value = articleList.value.filter((item) => item.id !== id);
        articlCount.value = articlCount.value - 1;
        rawSubset(0);
        getArticle(request);
        proxy.$message({ type: 'success', message: '删除成功' });
      }
    })
  } catch (error) {
    proxy.$message({ type: 'error', message: '删除失败' })
  }
};

// 翻页处理
const changePage = (page: number) => {
  request.nowPage = page;
  getArticle(request);
}


watch(
  props,
  () => {
    request.state = props.state;
    request.subset_id = props.subsetId;
    request.searchTerm = props.searchTerm;
    getArticle(request);
    
  },
)

onMounted(() => {
  getArticle(request);
})

</script>
<style scoped lang="less">
.pagination {
  padding: @space-s 0 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

</style>